<template>
  <div>
    <div id='formio'></div>
  </div>
</template>

<script lang="ts">
import { Formio } from 'formiojs';
import FormioContrib from '@formio/contrib/lib/index';
import 'formiojs/dist/formio.form.min.css'
import '@/assets/list.css'

import Skrform from "@/components/skrform";
Formio.use(Skrform)

Formio.use(FormioContrib)

export default {
  name: "FormRender",
  data() {
    return {
      userName: 'ddshuai'
    }
  },
  methods: {},
  mounted: function () {

    const ele = document.getElementById('formio')
    if (ele) {
      let schema = window.localStorage.getItem('json-schema');
      Formio.createForm(ele, schema ? JSON.parse(schema) : {}, {
        renderMode: 'form'
      }).then(function (form) {
        // Defaults are provided as follows.
        form.submission = {
          data: {
            container: {
              applyUserName: '帅冬冬',
              baseInfo: {
                applyUserName: '帅冬冬',
                extelNo: 'E209202200202',
                companyName: '杭州外语',
                feeCompany: '行外',
                bizType: '培训',
                companyName1: 'wewew',
                feeCompany1: 'wewe',
                applyCause: 'wewewe',
                a1: 'wew',
                a2: 'wewew',
                a3: 'wewe',
                a4: 'wewew',
                remark: 'wewewe',
              },
              skrForm: {
                skrFullName: '222',
                skrKhyh:'宁波银行',
                skrYhzh: '929299292',
                skrPhone: '2222222',
                skrContacter: '2222222'
              },
              dataMap: {
                ddshuai: 'heiheii'
              },
              dataGrid: [
                {email: '1325922028@qq.com', tags: '222', phoneNumber: '(211) 312-3322'},
                {email: 'shuaidd@139.com', tags: '333', phoneNumber: '(211) 312-3322'}
              ]
            },
            skrForm: {
              skrFullName: '222',
              skrKhyh:'宁波银行',
              skrYhzh: '929299292',
              skrPhone: '2222222',
              skrContacter: '2222222'
            },
          },
        };

        // Register for the submit event to get the completed submission.
        form.on('submit', function (submission: any) {
          console.log('Submission was made!', submission);
        });

        // Everytime the form changes, this will fire.
        form.on('change', function (changed: any) {
          console.log('Form was changed', changed);
        });
      });
    }
  }
}
</script>

<style scoped>
#formio {
  padding: 20px;
}
</style>

<style>
.table-bordered {
  width: 100%;
}
</style>
